<!-- 视图层 -->
<template>
  <div class="box">
    <!-- <van-tree-select
    v-model:main-active-index="activeIndex"
    
    height="100vw"
    
    :items="items"
  
>
  <template #content>
    {{ 1 }}
    <van-image
      v-if="activeIndex === 0"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
    />
    
    
  </template>
</van-tree-select> -->
  <!-- <ul class="right">
    <li v-for="(item,index) in items" :key="index" @click="getgoods">
      {{ item }}
    </li>
  </ul> -->
  <div class="right">
    <van-sidebar v-model="active" >
      <van-sidebar-item  v-for="(item,index) in items" :key="index" :title="item"  @click="onchange(item)"/>
    </van-sidebar>
  </div>
 
   <div class="left">
      <div v-for="(item,index) in list" :key="index" class="bbox" v-show=" item.category== t">
         <div>
          <img :src="item.img1" alt="">
          <span>{{ item.brand }}</span>
         </div>
      
        
      </div>
   </div>
  </div>
</template>

<!-- 逻辑层 -->
<script setup>
import { getCategoryList } from '@/api/cate';
import { getProList } from '@/api/home'
import { onMounted, ref } from 'vue';
let categoryList = defineProps(['categoryList'])
let items = ref([])
let list = ref([])
let t = ref(0)
let count=ref(1)
onMounted(()=>{
  getCategoryList().then(({data:res})=>{
    items.value = res.data
    console.log(items.value)
  })
  getProList({count:1,limitNum:150}).then(({data:res})=>{
     list.value = res.data
     console.log(list)
  })
})

const active = ref(0);
const onchange = (res)=>{
  t.value = res
  
  console.log(t.value)
}
  // console.log(categoryList)
  // const activeIndex = ref(0);
  // onMounted(()=>{
  //   for(let i=0;i<categoryList.length;i++){
  //      items[i].text.value = categoryList[i].value
  //   }
  //   console.log(items)
  // })

// let items = ref([])
//     // const activeIndex = ref(0);
//     const getactiveIndex = () => {
//         getCategoryList().then(({date:res})=>{
//           this.activeIndex.value = res.date
//           console.log(activeIndex)
//           this.items.value = res.data
//       }) 
//     }
      
</script>


<!-- 样式层 -->
<style scoped>
  .right{
    width: 80px;
    height: 700px;
    background-color: paleturquoise;
    overflow: scroll;
  }
 .van-sidebar{
  --van-sidebar-background:rgb(254, 234, 237);
  --van-sidebar-selected-border-color:rgb(214, 70, 94);
  --van-sidebar-selected-border-height:27px
 }
  .left{
    display: flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    width: 300px;
    height: 200px;
    box-sizing: border-box;
    
  }
  .bbox{
    width: 70px;
    
    margin-top: 30px;
    margin-left: 20px;
    
  }
  .bbox>div{
    width: 70px;
    height: 110px;
    text-align: center;
    
  }
  .box{
    display: flex;
  }
  img{
    width: 60px;
    height: 60px;
  }
  
  
</style>
